<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--设置页面基础路径 ：上下文路径+/
        /logistics/
        以后也没按的所有的请求跳转都不要手动加上最前面的斜杠，自动根据上下文路径进行跳转
        服务器根路径/logistics/admin/insert
    -->
    <base th:href="${#request.getContextPath()}+'/'">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" th:action="@{{path}(path=${admin eq null ? 'admin/insert' : 'admin/update'})} "  id="adminForm">
        <input name="adminId" type="hidden" th:value="${admin?.adminId}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员账号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text"  th:disabled="${admin} eq null?'false':'true'"  th:value="${admin?.username}" placeholder="" id="username" name="username">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>真实姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${admin?.realname}" placeholder="" id="realname" name="realname">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" value="" placeholder="密码" id="password"
                       name="password">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" placeholder="确认新密码" id="password2"
                       name="password2">
            </div>
        </div>
        <!-- <div class="row cl">
             <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
             <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                 <div class="radio-box">
                     <input name="sex" type="radio" id="sex-1" checked>
                     <label for="sex-1">男</label>
                 </div>
                 <div class="radio-box">
                     <input type="radio" id="sex-2" name="sex">
                     <label for="sex-2">女</label>
                 </div>
             </div>
         </div>-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span   class="select-box"  style="width:150px;">
                    <select class="select"  name="roleId" size="1">
                        <option value="0">请选择</option>
                        <!--当前修改的管理员的角色id和循环的角色的id只要相等，就选中-->
                        <option th:selected="${admin?.roleId eq role.roleId}" th:each="role:${roles}"  th:value="${role.roleId}" th:text="${role.rolename}"></option>
                    </select>

			</span>
            </div>
        </div>
        <!--<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="" cols="" rows="" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true" onKeyUp="$.Huitextarealength(this,100)"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
        </div>-->
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{lib/jquery-1.11.3/jquery.js}"></script>
<script type="text/javascript" th:src="@{lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{h-ui.admin/js/H-ui.admin.js}"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">
    $(function(){
        /*使用Jquery.validate进行表单校验*/
        $("#adminForm").validate({
            /*校验规则*/
            rules:{
                username:{
                    required:true,
                    minlength:3,
                    remote: {
                        url: "admin/checkUsername",     //后台处理程序
                        type: "post",               //数据发送方式
                        dataType: "json",           //接受数据格式
                        data: {                     //要传递的数据
                            username: function() {
                                return $("#username").val();
                            }
                        }
                    }
                },
                realname:{
                    required:true,
                    minlength:2,
                    isChinese:true,
                },
                password:{
                    required:true,
                },
                password2:{
                    required:true,
                    equalTo:"#password"
                },
                /*角色的id最小值不可能等于0，最少1*/
                roleId:{
                    min:1
                }

            },
            /*校验失败的提示消息*/
            messages:{
                username:{
                    required:"账号不能为空",
                    minlength:"账号最少三位数",
                    remote:"此账户已经存在，请换一个管理员账号"
                },
                realname:{
                    required:"真实姓名不能为空",
                    minlength:"真实姓名最少两个汉字",
                    isChinese:"真实姓名必须是汉字",
                },
                password:{
                    required:"密码不能为空"
                },
                password2:{
                    required:"确定密码不能为空",
                    equalTo:"确定密码必须和密码相同"
                },
                /*角色的id最小值不可能等于0，最少1*/
                roleId:{
                    min:"请选择一个角色"
                }
            },
            /*校验成功以后出发的函数
            * form ：当前表单（DOM对象）
            * */
            submitHandler:function(form){

                //异步提交表单
                $(form).ajaxSubmit({
                    success:function(data){

                        layer.msg(data.msg,{icon:data.code},function(){

                            //操作数据成功
                            if(data.code == 1){
                                //先刷新父页面表格（当前页面是adminManager页面弹出来的子页面，所以刷新父页面）
                                parent.refreshTable();
                                //父页面adminManager关闭弹出子页面
                                parent.layer.closeAll();
                            }

                        });

                    }
                });

            }
        })



    })
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
